<script setup lang="ts">
import { Message } from "earthsdk-ui";
const messageSuccess = () => {
  Message.success("成功");
};
const messageWarning = () => {
  Message.warning("警告");
};
const messageError = () => {
  Message.error("错误");
};
const messageText = () => {
  Message.text("文本");
};

// 使用 Message.loading需要为其指定一个id
const messageLoading = () => {
  Message.loading({ id: "xxx", content: "loading" });
};

// 关闭loading消息提示函数
const messages = () => {
  //根据id移除loading
  Message.remove("xxx");
};
</script>
<template>
  <div class="es-button_content">
    <es-button class="es-button" @click="messageSuccess">成功</es-button>
    <es-button class="es-button" @click="messageWarning">警告</es-button>
    <es-button class="es-button" @click="messageError">错误</es-button>
    <es-button class="es-button" @click="messageText">文本</es-button>
    <div class="es-button_content_loading">
      <es-button class="es-button" @click="messageLoading"
        >打开loading消息提示</es-button
      >
      <es-button class="es-button" @click="messages"
        >关闭loading消息提示</es-button
      >
    </div>
  </div>
</template>

<style scoped>
.es-button_content {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
}

.es-button {
  margin: 5px;
}

.es-button_content_loading {
  display: flex;
}
</style>
